<script lang="ts">
import { defineComponent } from 'vue'
import { Todo } from '../types/Todo'

interface State {
	isFormVisible: boolean
	todoText: string
}
export default defineComponent({
	name: 'AppAddTodo',
	data(): State {
		return {
			isFormVisible: false,
			todoText: '',
		}
	},
	methods: {
		toggleShowForm() {
			this.isFormVisible = !this.isFormVisible
		},
		addTodo() {
			this.$emit('addTodo', {
				id: Date.now(),
				text: this.todoText,
				completed: false,
			})

			this.todoText = ''
		},
	},
	emits: {
		addTodo: (todo: Todo) => todo,
	},
})
</script>

<template>
	<section class="add-todo">
		<form @submit.prevent="addTodo" class="add-todo__form" v-if="isFormVisible">
			<button @click="toggleShowForm" class="close-button" type="button">
				<i class="bi bi-x"></i>
			</button>
			<div class="text-input text-input--focus">
				<input v-model="todoText" class="input" />
			</div>
			<button class="button button--filled">Add task</button>
		</form>
		<button v-else class="add-todo__show-form-button" @click="toggleShowForm">
			<i class="bi bi-plus-lg"></i>
		</button>
	</section>
</template>

<style scoped></style>
